<template>

	<icon-svg type="add" @click="addBtn" :size=1.5 color="#000000"></icon-svg>
	<el-table v-if="tableData" :data="tableData" style="width: 100%" :key="isUpdate">
		<el-table-column prop="name" label="按钮名称" width="180" />
		<el-table-column prop="desc" label="功能说明" width="180" />
		<el-table-column
		    label="操作"
		    prop="action"
		    width="160">
		    <template #default="scope">
				<icon-svg type="del" @click="removeBtn(scope.$index)" :size=1.5 color="#000000"></icon-svg>
			    </template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="setBtndialogVisible" title="添加按钮" width="30%" >

		<el-form :model="modelRef" :rules="rulesRef" ref="formRef" label-width="80px">
			<el-form-item label="按钮名称" prop="name">
				<el-input v-model="modelRef.name" placeholder="请输入按钮名称" />
			</el-form-item>
			<el-form-item label="按钮说明" prop="desc">
				<el-input v-model="modelRef.desc" placeholder="请输入按钮说明" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="setBtndialogVisible = false">取消</el-button>
				<el-button type="primary" @click="addBtnSubmit">
					提交
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		computed,
		defineComponent,
		PropType,
		reactive,
		ref
	} from "vue";
	import {
		PageButtonItem
	} from '../data.d'
	import IconSvg from "@/components/IconSvg";
	interface PageButtonData {
		tableData:  PageButtonItem[]  ;
		modelRef: PageButtonItem;
		rulesRef: any;
	}
	export default defineComponent({
		props: {
			data: {
				type: String,
				required: true
			},
			setBtns:{
				type:Function,
				require:true
			}
		},
		data() {
			return {
				setBtndialogVisible: false,
				isUpdate:true
				
			}
		},
		components: {
			IconSvg
		},
		methods: {
			addBtn() {
				this.setBtndialogVisible = true
			},
			addBtnSubmit(){
				this.setBtndialogVisible = false
				if(!this.tableData){
					this.tableData=[]
				}
				this.tableData.push({
					isUse:true,
					name:this.modelRef.name,
					desc:this.modelRef.desc
				})
				this.isUpdate=!this.isUpdate
			 	this.setBtns(this.tableData)
			},
			removeBtn(index){
				this.tableData.splice(index,1)
				this.isUpdate=!this.isUpdate
				this.setBtns(this.tableData)
			}
		},
		setup(props) {
			let tableData=ref<PageButtonItem[]>() 
				try {
					tableData= JSON.parse(props.data)
				} catch {
					tableData=ref()
				}
			
			const modelRef = reactive < PageButtonItem > ({
				isUse:true,
				name: '',
				desc: ''
			});
			// 表单验证
			const rulesRef = reactive({

				name: [{
					required: true,
					validator: async (rule: any, value: string) => {
						if (value === '' || !value) {
							throw new Error('请输入名称');
						}
					}
				}, ]

			});
			return {
				tableData,
				modelRef,
				rulesRef
			}
		}
	});
</script>

<style>
</style>
